<template>
	<view class="pageV">
		<u-navbar title="共享商圈" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#111111"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="cenV">
			<view v-if="dataList.length>0">
				<scroll-view style="height: 90vh;" :scroll-y="true" @scroll="onScroll" :scroll-with-animation="true"
					:refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onDataList"
					refresher-default-style="white" @scrolltolower="scrolltolower">
					<view class="itemV" v-for="(item,key) in dataList" :key="key" @tap="onItemClick(item)">
						<view class="itemVAV">
							<image class="imageV" :src="item.image" mode="aspectFill"></image>
							<view class="centerV">
								<view class="titleTv">{{item.title}}</view>
								<view class="typeV">
									<view class="typeLeftV">
										<view class="stateTv1">{{item.describe}}</view>
										<!-- <view class="stateTv2">已有{{item.registered}}人参与</view> -->
									</view>
									<view class="typeRightV">
										<view class="stateTv3">{{item.time}}</view>
									</view>
								</view>
								<view class="bunV">
									<!-- <view class="bunV2">
										<view class="bunTv1">¥</view>
										<view class="bunTv2">{{item.price}}</view>
									</view>
									 -->
									<!-- <view v-if="item.people_num!=0&&item.registered>=item.people_num" class="bunTv4">参与活动</view> -->
									<view class="bunTv3">查看</view>
								</view>
							</view>
						</view>
						<view class="bLineV"></view>
					</view>
				</scroll-view>
			</view>
			<view v-if="dataList.length==0"
				style="justify-content: center; align-items: center; display: flex; height: 50vh; color: #8D8D8D;">
				暂无数据
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				dataList: [],
				triggered: false,
				mPage: 1,
				scrollTop: 0,
			}
		},
		onLoad() {
			this.getProjectList();
		},
		methods: {
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getProjectList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getProjectList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getProjectList() {
				this.$api.getQuanList({
					page: this.mPage
				}).then((res) => {
					if (this.mPage == 1) {
						this.dataList = res.list;
					} else {
						this.dataList.push(...res.list)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
					uni.$u.toast("获取信息失败");
				})
			},
			onItemClick(item){
				this.$u.route({
					url: '/shop/New/ShangDetail',
					params: {
						id: item.id,
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.cenV {
		flex: 1;
	}

	.itemV {
		display: flex;
		flex-direction: column;

		.itemVAV {
			display: flex;
			padding-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.imageV {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}

			.centerV {
				flex: 1;
				margin-left: 30rpx;

				.titleTv {
					color: #e8e8e8;
					font-size: 32rpx;
				}

				.typeV {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;

					.typeLeftV {
						display: flex;

						.stateTv1 {
							color: #9B9B9B;
							font-size: 22rpx;
							// background: #4A4A4A;
							border-radius: 17px;
							padding-left: 10rpx;
							padding-right: 10rpx;
						}

						.stateTv2 {
							color: #9B9B9B;
							font-size: 22rpx;
							background: #4A4A4A;
							border-radius: 17px;
							padding-left: 10rpx;
							padding-right: 10rpx;
							margin-left: 10rpx;
						}
					}

					.typeRightV {
						display: flex;
						align-items: center;
						justify-content: center;

						.stateIv {
							width: 29rpx;
							height: 29rpx;
						}

						.stateTv3 {
							font-size: 24rpx;
							color: #9B9B9B;
							margin-left: 3rpx;
						}
					}
				}

				.bunV {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.bunV2 {
						display: flex;
						align-items: baseline;

						.bunTv1 {
							font-size: 40rpx;
							color: #D4FF45;
						}

						.bunTv2 {
							font-size: 50rpx;
							color: #D4FF45;
						}
					}

					.bunTv3 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 70rpx;
						background: #D4FF45;
						border-radius: 35rpx;
						font-size: 28rpx;
						color: #333333;
						margin-left: auto;
					}
					
					.bunTv4{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 70rpx;
						background: #4a4a4a;
						border-radius: 35rpx;
						font-size: 28rpx;
						color: #959595;
					}
				}
			}
		}

		.bLineV {
			height: 1rpx;
			background: #383838;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}
	}
</style>
